<script setup>
  import { getDoctorListInfoApi, getLikeDoctorInfoApi } from '@/server/doctor'
  import foodList from './components/foodList.vue'
  import { ref } from 'vue'
  import tabCurcom from '@/components/tab-curcom/tab-curcom.vue'
  import doctorList from './components/doctorList.vue'

  // 获取安全区域数据
  const { safeAreaInsets } = uni.getSystemInfoSync()

  // 定义tabs组件的数据
  const feedTabs = ref([
    {
      label: '推荐',
      rendered: false,
      list: [],
      isMore: true,
      type: 'recommend',
    },
    {
      label: '减脂',
      rendered: false,
      list: [],
      isMore: true,
      type: 'fatReduction',
    },
    {
      label: '健康饮食',
      rendered: false,
      list: [],
      isMore: true,
      type: 'food',
    },
    {
      label: '关注医生',
      rendered: false,
      list: [],
      isMore: true,
      type: 'like',
    },
  ])

  // tab栏切换时对应的下标
  const activeIndex = ref(0)

  // 文章列表页码
  const pageCurrent = ref(1)

  // 文章列表每页数量
  const pageSize = ref(5)

  // 控制导航栏是否显示
  const isFoodShow = ref(false)
  // 获取foodlist初始数据
  async function getFoodListInfo() {
    const { data } = await getDoctorListInfoApi({
      current: pageCurrent.value,
      pageSize: pageSize.value,
      type: feedTabs.value[activeIndex.value].type,
    })
    if (data.code !== 10000) return uni.utils.toast()

    feedTabs.value[activeIndex.value].list.push(...data.data.rows)
    feedTabs.value[activeIndex.value].rendered = true
    isFoodShow.value = true

    // 如果当前页数与总页数相等就返回isMore就返回false
    if (pageCurrent.value === data.data.pageTotal) {
      feedTabs.value[activeIndex.value].isMore = false
    }
  }
  getFoodListInfo()

  // 点击导航栏后的事件
  function onSelectChangefn(doctorInfo, index) {
    activeIndex.value = index
    pageCurrent.value = 1
    if (feedTabs.value[index].rendered) return
    getFoodListInfo()
  }

  // 滑动到底部时触发
  function onDoctorSwiptBottonfn() {
    if (!feedTabs.value[activeIndex.value].isMore)
      return uni.utils.toast('已经没有更多数据了~')
    pageCurrent.value = pageCurrent.value + 1
    getFoodListInfo()
  }

  // 获取关注的医生
  const likeDotorList = ref([])
  const likePageCurrent = ref(1)
  const likePageSize = ref(5)
  const isLikeShow = ref(false)
  const isLikeShowMore = ref(false)
  // 获取每页20条的医生
  async function getLikeDoctorInfo() {
    if (isLikeShowMore.value) return uni.utils.toast('没有更多数据了~')
    const { data } = await getLikeDoctorInfoApi({
      current: likePageCurrent.value,
      pageSize: likePageSize.value,
    })
    likeDotorList.value.push(...data.data.rows)
    isLikeShow.value = true
    if (likePageCurrent.value >= data.data.pageTotal)
      isLikeShowMore.value = true
  }
  getLikeDoctorInfo()

  // 关注医生页滑动到最左边
  function onLikeDoctorMoreInfo() {
    likePageCurrent.value += 1
    getLikeDoctorInfo()
  }

  // 测试调用云函数
  uniCloud.callFunction({
    name: 'uni-test',
    data: { name: '小红' },
    success(res) {
      console.log(res)
    },
  })
</script>
<template>
  <scroll-page @scrolltolower="onDoctorSwiptBottonfn">
    <view
      class="index-page"
      :style="{ backgroundPositionY: -48 + safeAreaInsets.top + 'px' }"
    >
      <!-- 页面导航 -->
      <view
        :style="{ paddingTop: safeAreaInsets.top + 'px' }"
        class="page-navbar"
        >优医</view
      >

      <!-- 搜索栏 -->
      <view class="search-bar">
        <input
          placeholder-class="input-placeholder"
          placeholder="搜一搜: 疾病/症状/医生/健康知识"
          class="input"
          type="text"
        />
        <view class="icon-search">
          <uni-icons size="22" color="#C3C3C5" type="search" />
        </view>
      </view>
      <!-- 快速入口 -->
      <view class="quick-entry">
        <navigator hover-class="none" class="quick-entry-item">
          <image
            class="quick-entry-icon"
            src="/static/images/quick-entry-1.png"
          />
          <text class="label">问医生</text>
          <text class="small">按科室查问医生</text>
        </navigator>
        <navigator
          hover-class="none"
          class="quick-entry-item"
          url="/subpack_consult/quickly/quickly?type=2"
        >
          <image
            class="quick-entry-icon"
            src="/static/images/quick-entry-2.png"
          />
          <text class="label">极速问诊</text>
          <text class="small">20s医生极速回复</text>
        </navigator>
        <navigator hover-class="none" class="quick-entry-item">
          <image
            class="quick-entry-icon"
            src="/static/images/quick-entry-3.png"
          />
          <text class="label">开药门诊</text>
          <text class="small">线上买药更方便</text>
        </navigator>
      </view>
      <!-- 快速查看 -->
      <view class="quick-view">
        <navigator
          hover-class="none"
          class="quick-view-item"
          url="/subpack_medicue/orderList/orderList"
        >
          <image
            class="quick-view-icon"
            src="/static/images/quick-view-1.png"
          />
          <text class="label">药品订单</text>
        </navigator>
        <navigator
          hover-class="none"
          class="quick-view-item"
          url="/subpkg_archive/list/index"
        >
          <image
            class="quick-view-icon"
            src="/static/images/quick-view-2.png"
          />
          <text class="label">健康档案</text>
        </navigator>
        <navigator hover-class="none" class="quick-view-item">
          <image
            class="quick-view-icon"
            src="/static/images/quick-view-3.png"
          />
          <text class="label">我的处方</text>
        </navigator>
        <navigator hover-class="none" class="quick-view-item">
          <image
            class="quick-view-icon"
            src="/static/images/quick-view-4.png"
          />
          <text class="label">疾病查询</text>
        </navigator>
      </view>
      <!-- 广告位 -->
      <view class="banner-placeholder">
        <swiper
          class="uni-swiper"
          indicator-dots
          indicator-color="#ffffff99"
          indicator-active-color="#fff"
          circular
        >
          <swiper-item>
            <navigator hover-class="none" class="navigator" url=" ">
              <image class="banner-image" src="/static/images/banner-1.png" />
            </navigator>
          </swiper-item>
          <swiper-item>
            <navigator hover-class="none" class="navigator" url=" ">
              <image
                class="banner-image"
                src="/static/images/banner-1.png"
                mode="aspectFill"
              />
            </navigator>
          </swiper-item>
        </swiper>
      </view>
      <!-- 标签页列表 -->
      <doctor-list
        v-if="isLikeShow && feedTabs[activeIndex].type === 'like'"
        :list="likeDotorList"
        @likeDoctorMore="onLikeDoctorMoreInfo"
      ></doctor-list>
      <tab-curcom :list="feedTabs" @click="onSelectChangefn"></tab-curcom>
      <food-list
        v-if="isFoodShow"
        :list="feedTabs[activeIndex].list"
        :type="feedTabs[activeIndex].type"
      ></food-list>
    </view>
  </scroll-page>
</template>
<style lang="scss">
  @import './index.scss';
</style>
